<template>
  <div class="goods-sku">
    <dl v-for="spec in goods.specs" :key="spec.id">
      <dt>{{ spec.name }}</dt>
      <dd>
        <template v-for="val in spec.values" :key="val.name">
          <img v-if="val.picture" @click="clickSpec(spec, val)" :class="{ selected: val.isSelected, disabled: val.disabled }" :src="val.picture" :title="val.name" />
          <span v-else @click="clickSpec(spec, val)" :class="{ selected: val.isSelected, disabled: val.disabled }">{{ val.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import { spliter, getPathMap, updateDisabledStatus, getSelectedArr } from '../hooks/spu&sku'

// 默认选中的状态
const initDefaultSelected = (goods, skuId) => {
  // 1.找出sku的信息
  // 2.遍历每一个按钮,按钮的值和sku记录的值相同,就选中
  const selectedSku = goods.skus.find((sku) => sku.id === skuId)
  // 在这里必须要判断一下是否能找到对应的sku,默认的
  if (selectedSku) {
    goods.specs.forEach((spec, i) => {
      const val = spec.values.find((val) => val.name === selectedSku.specs[i].valueName)
      val.isSelected = true
    })
  }
}

export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => {}
    },
    skuId: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    // 得到路径字典对象
    const pathMap = getPathMap(props.goods.skus)
    // 根据传入的skuId默认选中规格按钮
    initDefaultSelected(props.goods, props.skuId)
    // 组件初始化：更新按钮的禁用状态(更新按钮的状态需要使用路径字典和props中的数据,props.goods,map)
    updateDisabledStatus(props.goods.specs, pathMap)
    // 选中与取消选中,约定在每一个按钮都拥有自己的选中状态数据,selected
    const clickSpec = (item, val) => {
      // 如果是禁用状态 ，不作为
      if (val.disabled) return
      //  1.1  点击的是已选中,只需要当前的选中
      //  1.2  点击的是未选中，把同一个规格的按钮改成未选中,当前点击的改成选中状态
      if (val.isSelected) {
        val.isSelected = false
      } else {
        item.values.forEach((val) => {
          val.isSelected = false
        })
        val.isSelected = true
      }
      // 点击按钮更新禁用状态
      updateDisabledStatus(props.goods.specs, pathMap)
      // 点击按钮之后，如果数据是完整的将sku数据传递给父组件
      const validSelectedArr = getSelectedArr(props.goods.specs).filter((v) => v)
      // 获取到点击的规格的数组之后，判断是不是一个完整的数组
      if (validSelectedArr.length === props.goods.specs.length) {
        // 完整的  如果是完整的数据就要将对应的sku找出来，将sku中的数据发送给父组件
        const skuIds = pathMap[validSelectedArr.join(spliter)]
        const sku = props.goods.skus.find((sku) => sku.id === skuIds[0])
        emit('change', {
          skuId: sku.id,
          inventory: sku.inventory,
          oldPrice: sku.oldPrice,
          price: sku.price,
          // 属性名: 属性值 属性名1: 属性值1,   就是将选中的规格拼接成字符串
          specsText: sku.specs
            .reduce((v1, v2) => {
              return `${v1} ${v2.name}: ${v2.valueName}`
            }, '')
            .trim()
        })
      } else {
        // 不完整的
        emit('change', {})
      }
    }
    return { clickSpec, pathMap }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
